<template>
  <div ref="chart" class="echart"> </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
    },
    list: {
      type: Array,
    },
  },
  data() {
    return {
      fontSize:16,
      padding:false
    };
  },

  methods: {
     ScreenWidth(){
     
          if (screen.width <= 1920){
              this.fontSize=12;
              this.padding=false;
          }else{
             this.fontSize=16;
              this.padding=true;
          }
 },
    drawLine(n) {
      var that = this;
      this.ScreenWidth();
      const chart = this.$refs.chart;

      // 基于准备好的dom，初始化echarts实例
 
      var myChart = this.$echarts.init(chart); //推荐
      var months=[];
           n.dataMonths.length&&n.dataMonths.map((item,i)=>{
             months.push(item)
            })
     
           var nox = n.nox;
           var so2 = n.so2;
           var pm = n.pm;
            var nonMethane = n.nonMethane;
             
         var options = {
         
        title: {
            text: '(吨)',
            textStyle: {
                color: '#ffffff',
                 fontSize: this.padding?14:that.fontSize
            },
            top: '20%',
            left: '2%'
        },
        color: ['#00aaf5', '#f60003', '#e505ff', '#32F43C'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            },
           extraCssText:'width:160px;z-index:99999;position:absolute'
        },
        legend: {
            data: n.data,
            icon: "circle",
            top: '10%',
            textStyle: {
                color: '#fff',
                fontSize: this.padding?20:that.fontSize
            }
        },
        
        grid: {
            top: '30%',
            left: '1%',
            right: '3%',
             bottom: '0',
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            boundaryGap: false,
            data: months,
            axisLabel: {
                interval: 2,
                // rotate: 60,
                show: true,
                textStyle: {
                    color: '#fff',
                    fontSize: this.padding?14:that.fontSize
                }
            }
        }],
        yAxis: {
            type: 'value',
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff',
                    fontSize: that.fontSize
                }
            },
        },
           dataZoom: [
          {
            type: "inside", //详细配置可见echarts官网
            show: false, //是否显示
            realtime: true, //拖动时，是否实时更新系列的视图
            start: 0, //伸缩条开始位置（1-100），可以随时更改
            end: 1000, //伸缩条结束位置（1-100），可以随时更改
          },
        ],
        series: [{
            itemStyle: {normal: {label: {show: false}}},
            name: n.data[0],
            type: 'line',
            //areaStyle: {},
            data: nox
        },
            {
                itemStyle: {normal: {label: {show: false}}},
                name: n.data[1],
                type: 'line',
                //areaStyle: {},
                data: so2
            },
            {
                itemStyle: {normal: {label: {show: false}}},
                name: n.data[2],
                type: 'line',
                //areaStyle: {},
                data: pm
            },
            {
                itemStyle: {normal: {label: {show: false}}},
                name:n.data[3],
                type: 'line',
                //	areaStyle: {},
                data: nonMethane
            },
        ]
    };
      // 绘制图表
      options && myChart.setOption(options);
      window.addEventListener("resize", () => {
        myChart.resize(); //resize 页面大小改变，调整大小
      });
    },
  },
  mounted() {
     this.drawLine(this.list[0]);
  },
};
</script>
<style lang="less" scoped>
.echart {
  width: 100%;
  height: 100%;
}
.font {
  font-size: 0.313vw;
  color: white;
}
</style>
